<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<!--字母反转方式一：不推荐-->
<div id="app-1">
    {{message.split('').reverse().join('')}}
</div>
<!--字母反转方式二-->
<div id="app-2">
    {{message2}}
    <!--注意{}内的内容，如果是方法就要加（）-->
    <p>反转后的内容{{reverseMessage2()}}</p>
</div>
<!--字母反转方法三  此方法在括号中没有方法（）-->
<div id="app-3">
    <p>原始{{message3}}</p>
    <p>反转后{{reverseMessage3}}</p>
</div>
<!--方法二和方法三的区别在于methods会实时刷新数据，而computed会在第一次加载后，产生缓存-->

<!--Vue.js提供了一个方法$watch,它用于观察Vue实例上的数据变动。
当一些数据需要根据其它数据变化时，$watch很诱人，不过，通常更好的办法是使用计算属性
而不是一个命令式的$watch回调。-->
<div id="app-4">{{fullName}}</div>
<!--另一种实现方式-->
<div id="app-5">{{fullName}}</div>
<!--计算属性可以满足需求而且书写简便，为什么需要watch?
来响应数据的变化，当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的-->

<!--watch  擅长处理的场景：一个数据影响多个数据 监听数据的变化
 computed  擅长处理的场景：一个数据受多数据的影响
-->

<div id="app-6">
    <p>{{haiZeiTuan_Name}}</p>
    <p>{{suoLong}}</p>
    <p>{{naMei}}</p>
    <p>{{xiangJiShi}}</p>
</div>
<script>
    var app1=new Vue({
        el:'#app-1',
        data:{
            message:'Hello Ke'
        }
    })

    var app2=new Vue({
        el:'#app-2',
        data:{
            message2:'Hello Hou Hou'
        },
        methods:{
            reverseMessage2:function(){
                return this.message2.split('').reverse().join('')
            }
        }
    })

    var app3=new Vue({
        el:'#app-3',
        data:{
            message3:'Zhou Er Ke'
        },
        computed:{
            reverseMessage3:function(){
                return this.message3.split('').reverse().join('')
            }
        }
    })

    var app4=new Vue({
        el:'#app-4',
        data:{
            firstName:'Foo',
            lastName:'Bar',
            fullName:'Foo Bar'

        },
        watch:{
            firstName:function(val){
                this.fullName=val+' '+this.lastName
            },
            lastName:function(val){
                this.fullName=this.firstName+' '+val
            }
        }
    })

    var app5=new Vue({
        el:'#app-5',
        data:{
            firstName:'Foo',
            lastName:'Bar',
        },
        computed:{
            fullName:function(){
                return this.firstName+' '+this.lastName
            }
        }
    })

    var vm=new Vue({
        el:'#app-6',
        /*
         data选项中的数据：
         1.haiZeiTuan_Name --> 海贼团名称
         2.船员的名称 = 海贼团名称（草帽海贼团） + 船员名称（例如索隆）

         这些数据里存在这种关系：
         （多个）船员名称数据 --> 依赖于 --> （1个)海贼团名称数据
         一个数据变化 ---> 多个数据全部变化
         */
        data:{
            haiZeiTuan_Name:'草帽海贼团',
            suoLong:'草帽海贼团索隆',
            naMei:'草帽海贼团娜美',
            xiangJiShi:'草帽海贼团香吉士'

        },
        /*
         在watch中，一旦haiZeiTuan_Name（海贼团名称）发生改变
         data选项中的船员名称全部会自动改变 （suoLong，naMei，xiangJiShi）
         并把它们打印出来
         */
        watch:{
            haiZeiTuan_Name:function(newName){
                this.suoLong=newName+'索隆'
                this.naMei = newName + '娜美'
                this.xiangJiShi = newName + '香吉士'
                console.log(this.suoLong)
                console.log(this.naMei)
                console.log(this.xiangJiShi)
            }
        }
    })
</script>
</body>
</html>


















